<template>
  <!-- 组件的模板 -->
  <div class="page">
        <form>
            <div class="item flex">
                <input  v-on:input="veriryPhoneFormat" v-model="formData.phone" id="phone2" type="tel" maxlength="11" placeholder="手机号" :value="formData.phone">
            </div>
            <div class="item flex" :class="{'active': pwdIsVisiable}">
                <input v-show="pwdIsVisiable" v-model="formData.password" id="pwd" type="text" class="input-text" placeholder="密码（6-20个字符）" maxlength="20" :value="formData.password">
                <input v-show="!pwdIsVisiable" v-model="formData.password" id="pwd" type="password" class="input-text" placeholder="密码（6-20个字符）" maxlength="20" :value="formData.password">
                <span class="bg_sprite icon_eye" @click="switchPwdVisiable"></span>
            </div>
            <a v-if="formData.phone&&formData.password" @click="doLogin" id="pwdLoginBtn" href="javascript:;" class="weui-btn weui-btn_primary">登 录</a>
            <a v-else id="pwdLoginBtn" href="javascript:;" class="weui-btn weui-btn_primary weui-btn_disabled">登 录</a>
        </form>
        <div class="link">
            <span>还没有账号？<a href="dmsaas://register">去注册</a></span>
            <a href="dmsaas://resetpassword">忘记密码</a>
        </div>
    </div>
  <!-- page end -->
  <!-- 未设置密码或者未注册 -->
<!--   <div id="dialog1" v-if="isshow">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" v-if="data.code == -312">该账号还没有设置过密码</div>
            <div class="weui-dialog__bd" v-else-if="data.code == -313">该手机号未注册</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="cancel">取消</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" v-if="data.code == -312" @click="gotoPwd">去设置</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" v-else @click="gotoAffirm">去注册</a>
            </div>
        </div>
    </div> -->
  <!-- popup start -->
  <div class="mask" v-show="showRobotPopup"></div>
  <!-- <div class="form-warning" v-show="hasError">{{errMsg}}</div> -->
  <!-- popup end -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import $ from 'zepto'
    import * as util from 'js/util.js'
    import userCenterApi from 'clientApi/userCenterApi'
    import safety from 'gapi/safety'
    import widget from 'gapi/widget.js'
    import commonPage from 'clientApi/commonPage.js'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    /**
     *  组件实例对象
     */

    export default {
        components: {},
        data: function(){
            return {
                pwdIsVisiable: false,
                login_disabled: true,
                vCodeActive: false,
                showRobotPopup: false,
                formData: {},
                imgCode : '',
                // hasError: false,
                errMsg: '',
                isshow: false,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){ 

              // if (this.formData.password !='' && this.formData.password !='undefined' && this.formData.phone !='undefined' && this.formData.phone !=''){
              if (this.formData.password && this.formData.phone){
                // alert(this.formData.password)
                // alert(this.formData.phone)
                this.login_disabled = false;
              }else{
                this.login_disabled = true;
              }
              if(util.getUrddataString('phoneNumber') != '' && util.getUrddataString('phoneNumber') != 'undefined'){
                this.formData.phone = util.getUrddataString('phoneNumber')
              }

            },
            //密码登录
            doLogin (){
                // this.hasError = true;
                //表单校验 todo: migrate to vue-validator
                if (!this.formData.phone){
                    widget.toast('手机号不能为空')
                    return
                }else if (this.formData.phone.length != 11){
                    widget.toast('请输入正确的手机号') 
                    return
                }else if (!this.formData.password){
                    widget.toast('密码不能为空') 
                    return
                }else {
                    // this.hasError = false
                    // this.errMsg = ""
                    //调用客户端加密Api todo 变量作用域
                    commonPage.loadPageStatus('loading')
                    safety.dekEncrypt(this.formData.password, info => {
                      const encryptPwd = info;
                      //调用客户端登陆Api
                      userCenterApi.logIn(this.formData.phone, '', encryptPwd, {}, data => {
                        commonPage.loadPageStatus('loadSuccess')
                        if(!!data){                   
                          console.log("errorMessage"+data.code);
                          if (data.code == -201) {
                            widget.toast(data.message);
                          }else if(data.code == -313) {
                            widget.toast('当前用户未注册，请直接注册');
                          }else if(data.code == -312) {
                            widget.toast('密码错误，请点忘记密码进行重置');
                          }else{
                            widget.toast(data.message);
                          }
                        }
                        // Native toast: 密码错误 or  未注册
                      })
                    })
                }
            },
            /**
            * 监听手机输入,格式正确可获取手机验证码
            **/
            veriryPhoneFormat (){
                const phone = this.phoneformData.phone;
                const phoneIsValid = /^\d{11}$/.test(phone);
                this.vCodeActive = phoneIsValid ? true : false;
            },
            /**
            * 获取手机验证码
            **/
            getVCode (){
                const api_url = "www.doumi.com/api/v2/client/authCkCode"
                this.showRobotPopup = true;
                //获取图片验证码

                this.$http.jsonp(api_url).then((response) => {
                    console.log(JSON.stringify(response))
                    //
                }, (response) => {
                    console.log(response)
                });
            },
            /**
            * 点击取消button, 隐藏验证码弹窗
            **/
            cancelRobotPopup (){
                this.showRobotPopup = false;
            },
            /**
            * 切换密码可见
            **/
           switchPwdVisiable (){
             //change active class
              this.pwdIsVisiable = !this.pwdIsVisiable;
           }
        },
        created(){ 
          $('#phone2').trigger("click").focus() 
              // $("#phone2").trigger("select")
            this.init();

        }

    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/global.css"></style>
<style src="../../static/css/login.css"></style>
<style src="../../static/css/form.css"></style>
<style src="../../static/css/account.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/login-register.css"></style>
<style>
  body{
    background: #fff!important;
  }
  .input-text{
    text-align: left!important;
  }
  ::-webkit-input-placeholder {
    color: #bbb!important;
  }
  .dialog__btn_primary {
    color: black!important;
  }
  /*input, textarea {
    -webkit-user- select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
  }
  *: not(input, textarea) {
  -webkit-touch-callout: none!important;
  -webkit-user-select: none!important;
  }
  * {
    -webkit-user-select: text!important;
    -user-select: text!important;
  }*/

</style>